<template>
  <div v-loading="loading" :class="className" :style="{ height: height, width: width }" />
</template>

<script>
import * as echarts from 'echarts'
import china from '@/map/china.json'
echarts.registerMap('china', china)
import resize from './mixins/resize'
import { moneyFormat } from '@/utils/ruoyi'
export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100%'
    },
    chartData: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      chart: null,
      loading: false
    }
  },
  watch: {
    chartData() {
      this.loading = true
      this.initChart()
      this.loading = false
    }
  },
  mounted() {
    this.initChart()
  },
  beforeDestroy() {},
  methods: {
    initChart() {
      var data = this.chartData.map(ele => {
        return {
          name: ele.areaName,
          value: ele.count === null ? 0 : ele.count,
          areaId: ele.areaId
        }
      })
      var max = -Infinity
      var min = Infinity
      data.forEach(function(itemOpt) {
        if (itemOpt.value > max) {
          max = itemOpt.value
        }
        if (itemOpt.value < min) {
          min = itemOpt.value
        }
      })

      var mapName = 'china'
      this.chart = echarts.init(this.$el, '', { renderer: 'svg', useDirtyRect: false })

      var geoCoordMap = {}
      // myChart.showLoading();
      var mapFeatures = echarts.getMap(mapName).geoJson.features
      // myChart.hideLoading();
      mapFeatures.forEach(function(v) {
        // 地区名称
        var name = v.properties.name
        // 地区经纬度
        geoCoordMap[name] = v.properties.cp
      })
      var convertData = function(data) {
        var res = []
        for (var i = 0; i < data.length; i++) {
          var geoCoord = geoCoordMap[data[i].name]
          if (geoCoord) {
            res.push({
              name: data[i].name,
              value: geoCoord.concat(data[i].value),
              areaId: data[i].areaId
            })
          }
        }
        return res
      }
      var option = {
        title: {
          subtext: this.$t('项目数量(个)'),
          subtextStyle: {
            fontSize: this.fitChartFont(16),
            color: '#0F6DA6'
          },
          bottom: 0,
          right: 0
        },
        visualMap: {
          show: false,
          min: min,
          max: max,
          calculable: true,
          inRange: {
            color: ['#4C78DA', '#4344C3', '#453BB4', '#4D32A5', '#572794']
          }
        },
        geo: {
          map: 'china',
          show: true,
          roam: true,
          itemStyle: {
            // 地图区域的多边形 图形样式。
            normal: {
              areaColor: '#3497DC'
            }
          },

          label: {
            normal: {
              show: false
            },
            emphasis: {
              show: false
            }
          }
        },
        toolbox: {
          itemSize: this.fitChartFont(10),
          feature: {
            saveAsImage: {
              name: this.$t('项目地域分布')
            }
          }
        },
        series: [
          {
            symbolSize: this.fitChartFont(5),
            label: {
              normal: {
                textStyle: {
                  color: '#fff',
                  fontSize: this.fitChartFont(11),
                  fontWeight: 'bold'
                },
                formatter(p) {
                  // console.log(p)
                  return window.i18n.t(p.name) + ': ' + p.data.value[2]
                },
                position: 'right',
                show: true
              },
              emphasis: {
                show: true
              }
            },
            itemStyle: {
              normal: {
                color: '#fff'
              }
            },
            name: 'light',
            type: 'scatter',
            coordinateSystem: 'geo',
            data: convertData(data),
            zlevel: 3
          },
          {
            type: 'map',
            map: 'china',
            geoIndex: 0,
            showLegendSymbol: false, // 存在legend时显示
            label: {
              normal: {
                show: false
              },
              emphasis: {
                show: false,
                textStyle: {
                  color: '#fff'
                }
              }
            },
            roam: true,
            itemStyle: {
              normal: {
                areaColor: '#031525',
                borderColor: '#FFFFFF'
              },
              emphasis: {
                areaColor: '#2B91B7'
              }
            },
            animation: false,
            data: data
          },
          {
            name: 'light',
            type: 'scatter',
            coordinateSystem: 'geo',
            label: {
              normal: {
                show: false,
                textStyle: {
                  color: '#fff',
                  fontSize: this.fitChartFont(9)
                },
                formatter(value) {
                  return moneyFormat(value.data.value[2], 'w')
                }
              }
            },
            itemStyle: {
              normal: {
                color: '#1DE9B6' // 标志颜色
              }
            },
            data: convertData(data),
            showEffectOn: 'render',
            rippleEffect: {
              brushType: 'stroke'
            },
            hoverAnimation: true,
            zlevel: 1
          },
          {
            //  name: 'Top 3',
            type: 'effectScatter',
            coordinateSystem: 'geo',
            label: {
              normal: {
                show: false,
                textStyle: {
                  color: '#fff',
                  fontSize: this.fitChartFont(10)
                },
                formatter(value) {
                  return moneyFormat(value.data.value[2], 'w')
                }
              }
            },
            itemStyle: {
              normal: {
                color: '#1DE9B6' // 标志颜色
              }
            },
            data: convertData(
              data
                .sort(function(a, b) {
                  return b.value - a.value
                })
                .slice(0, 3)
            ),
            showEffectOn: 'render',
            rippleEffect: {
              brushType: 'stroke'
            },
            hoverAnimation: true,
            zlevel: 1
          }
        ]
      }
      var that = this
      this.chart.setOption(option)
      // 点击地图查询调了2次方法导致查不到去掉一次
      this.chart.off('click')
      this.chart.on('click', function(ev) {
        if (ev.data && ev.data.areaId) {
          that.$emit('clickHandel', ev.data.areaId)
        } else {
          that.$emit('clickHandel', '无')
        }
      })
    }
  }
}
</script>

<style scoped>
</style>
